<template>
	<view class="bui-vr-preview" style="background-color: aliceblue;">
		<canvas type="webgl" :id="id" :canvas-id="id" :style="{width: width, height:height}" :disable-scroll="true"
			@touchmove.prevent.stop="touchmove" @touchstart.prevent.stop="touchstart" @touchend.prevent.stop="touchend"
			@error="canvasIdErrorCallback"></canvas>

	</view>
</template>

<script>
	// fbudlr  
	import ImageAr from "./ImageAr.js";

	let images = [
		'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720', // 后
		'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720', // 前
		'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720', // 上
		'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720', // 下
		'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720', // 左
		'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720', // 右
	]
	export default {
		props: {
			/* canvas id, 同一页面多次引用,不可重名 */
			id: {
				type: String,
				default: "canvas_" + Math.round(Math.random() * 9999)
			},
			height: {
				type: String,
				default: "90vh"
			},
			width: {
				type: String,
				default: "100vw"
			}
		},
		data() {
			return {
				imagebox: null,
				inited: false,
			};
		},
		onLoad() {
			console.log('Load')
			this.$nextTick(() => {
				this.init()
			})
		},

		methods: {

			init() {
				console.log('000')
				let self = this;
				console.log(111)
				let selector = uni.createSelectorQuery().select(`#${this.id}`);
				console.log(selector)
				selector.node()
					.exec((res) => {
						console.log('22222')
						const canvas = res[0].node
						console.log(canvas)
						console.log(ImageAr)
						this.imagebox = new ImageAr(canvas, images, {
							textureComplete: () => {
								self.inited = true;
							}
						});
					})
			},
			canvasIdErrorCallback: function(e) {
				console.error("canvas 操作异常", e.detail.errMsg, e)
			},
			touchmove(e) {
				let self = this;

				if (!self.inited) return;
				this.imagebox.touchmove(e)
			},
			touchstart(e) {
				let self = this;
				this.imagebox.touchstart(e)
			},
			touchend(e) {
				let self = this;
				if (!self.inited) return;
				this.imagebox.touchend(e)
			},

		}
	}
</script>

<style lang="scss" scoped>

</style>